<template>
	<header>
		<x-header :left-options="{showBack: false}">
			<div class="head" :style="headBg">
				<router-link to="/" class="logo">LOGO</router-link>
				<x-icon type="navicon" class="icon-nav" @click="headshake" size="35"></x-icon>
	  		</div>
	    </x-header>
	</header>
</template>

<script>
	
	import { XHeader } from 'vux'
	import head_bg from '../../assets/head_bg.jpg'
	export default{
		components : {
			XHeader,
		},
		data() {
			return {
				headBg : "background:url('"+ head_bg +"') center center no-repeat",
			}
		},
		methods : { 
		 	headshake (ev){	
			
				ev.target.classList.add('active');
				
				setTimeout(function (){	
					ev.target.classList.remove('active');
				},750);
			
			},
		}
	}
	
</script>
<style type="text/css">
	.vux-header{
		 width:100%; z-index: 99; background:#fff !important; height: 0.65rem; 
	}
	.vux-header .logo{
		font-size:0.18rem; float: left; margin: 0.05rem 0.15rem;
	}
	.vux-header-title{
		margin: 0 auto !important; overflow: visible !important;
	}
	.head{
		position: fixed !important; top: 0rem; width:100%; height: 0.65rem; line-height: 0.6rem; background-size: 200% 0.65rem !important;
	}
	.icon-nav{
		position: absolute; top:0.08rem; right: 0.08rem; fill: #333; width:0.4rem; height: 0.5rem;
	}
	
	.vux-header .active{
		-webkit-animation:headshake 700ms linear; animation: headshake 700ms linear;
	}
	
	@-webkit-keyframes headshake {
	  from, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
	  10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-0.07rem, 0, 0); transform: translate3d(-0.07rem, 0, 0); }
	  20%, 40%, 60%, 80% { -webkit-transform: translate3d(0.07rem, 0, 0); transform: translate3d(0.07rem, 0, 0); }
	}
	
	@keyframes headshake {
	  from, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
	  10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-0.07rem, 0, 0); transform: translate3d(-0.07rem, 0, 0); }
	  20%, 40%, 60%, 80% { -webkit-transform: translate3d(0.07rem, 0, 0); transform: translate3d(0.07rem, 0, 0); }
	}
		
</style>